<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 520px;
        height: 280px;
        /* border: 1px solid; */
        position: relative;
        margin: 0 auto;
        overflow: hidden;
      }

      .imgContainer {
        width: 2600px;
        height: 280px;
        position: absolute;
        left: 0px;
      }

      .imgContainer img {
        float: left;
      }

      .preOrnext {
        width: 520px;
        height: 50px;
        position: absolute;
        top: 40%;
        font-size: 50px;
        z-index: 10;
        color: white;
      }

      .pre {
        float: left;
      }

      .next {
        float: right;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="preOrnext">
        <span class="pre"> < </span>
        <span class="next">></span>
      </div>
      <div class="imgContainer">
        <img src="../images/1.png" alt="" />
        <img src="../images/2.png" alt="" />
        <img src="../images/3.png" alt="" />
        <img src="../images/4.png" alt="" />
        <img src="../images/5.png" alt="" />
      <div>
    </div>
    <script>
      var imgContainerEle = document.querySelector(".imgContainer");
      var containerEle = document.querySelector(".container");
      // document.onclick = function(){
      //     move(imgContainerEle,"left",-520,function(){
      //         console.log("运动完成");
      //     })
      // }
      var page = 1;

      function autoPlay() {
        var timer = setInterval(function () {
          move(imgContainerEle, "left", -520 * page - 520, function () {
            page++;
            console.log(page);
            if (page == 6) {
              page = 1;
              imgContainerEle.style.left = "-520px";
            }
          });
        }, 2000);

        // 当鼠标移入的时候 停止自动轮播 当鼠标离开的时候 又需要自动轮播
        containerEle.onmouseenter = function () {
          console.log("enter");
          // 停止轮播
          clearInterval(timer);
        };
        containerEle.onmouseleave = function () {
          console.log("leave");
          autoPlay();
        };
      }
      autoPlay();

      // 1.复制第一张图到最后一张图的后面
      // 2.复制最后一张图 放在第一张之前；
      function cloneImg() {
        imgContainerEle.style.width = "3640px";
        // 获取第一张图片
        var fImg = imgContainerEle.firstElementChild;
        // 复制一份第一张图片
        var fCopyImg = fImg.cloneNode(true);

        // 获取最后一张图
        var lImg = imgContainerEle.lastElementChild;

        // 复制最后一张图
        var lCopyImg = lImg.cloneNode(true);

        imgContainerEle.insertBefore(lCopyImg, fImg);

        // 把复制的图片放在第五张后面；
        imgContainerEle.appendChild(fCopyImg);

        imgContainerEle.style.left = "-520px";
      }

      cloneImg();

      // 点击下一页的按钮
      // 获取下一页的按钮
      var nexEle = document.querySelector(".next");
      nexEle.onclick = function () {
        move(imgContainerEle, "left", -520 * page - 520, function () {
          page++;
          console.log(page);
          if (page == 6) {
            page = 1;
            imgContainerEle.style.left = "-520px";
          }
        });
      };

      // 点击上一页功能
      var preEle = document.querySelector(".pre");
      preEle.onclick = function () {
        move(imgContainerEle, "left", -520 * page + 520, function () {
          page--;
          console.log(page);
          if (page == 0) {
            page = 5;
            imgContainerEle.style.left = "-2600px";
          }
        });
      };

      function move(boxEle, dir, dis, cb) {
        function fn() {
          var num = parseInt(getComputedStyle(boxEle)[dir]);
          var res = dis > num ? 1 : -1;
          var speed = 20 * res;
          boxEle.style[dir] = num + speed + "px";
          if (num + speed == dis) {
            // Math.abs( (num +speed)-dis)<5;
            cb && cb();
          } else {
            window.requestAnimationFrame(fn);
          }
        }
        fn();
      }
    </script>
  </body>
</html>
